<template>
  <view class="video-container">
    <video
      id="myVideo"
      title="我是标题"
      src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
      @error="videoErrorCallback"
      controls
      class="video"
      object-fit="contain"
      :page-gesture="true"
      :poster="image"
    ></video>
  </view>
  <scroll-view @scrolltolower="onScrolltolower" class="scroll-view" scroll-y>
    <view class="video-introduction">
      <view class="video-introduction-card">
        <view class="video-introduction-header-title">
          <text class="uni-title">title</text>
        </view>
        <view class="video-introduction-header-extra" @click="open">
          <text>简介</text>
          <text class="icon-right"></text>
        </view>
      </view>
    </view>

    <view class="video-introduction">
      <view class="video-introduction-card">
        <view class="video-introduction-header-title">
          <text class="uni-title">章节</text>
        </view>
        <view class="video-introduction-header-extra">
          <text></text>
        </view>
      </view>
      <view class="video-introduction-chapter">
        <view
          v-for="(chapter, index) in chapters"
          :key="index"
          class="video-introduction-header-extra p-xy-20rpx"
          :class="{ active: index === currentChapter }"
          @click="selectChapter(index)"
        >
          {{ chapter.title }}
        </view>
      </view>
    </view>

    <view class="latest-title">
      <text class="first">热门推荐</text>
    </view>
    <NVideoMoreList v-bind="propsOptions" />
    <uni-load-more :status="propsOptions.loadStatus"></uni-load-more>
  </scroll-view>
  <uni-popup ref="popupRef" type="bottom" background-color="#fff">
    <view class="popup-content">
      <view class="popup-content-title">
        <text>简介</text>
      </view>
      <view class="popup-content-text">
        <text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, nisl eget ultricies
          tincidunt, nisl nisl aliquam nisl, quis aliquam nisl nisl eget nisl. Sed viverra, nisl
          eget ultricies
        </text>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import NVideoMoreList from '@/components/NVideoMoreList.vue'
import type { NVideoMoreListProps } from '@/components/types/types'

const image = ref('https://img95.699pic.com/photo/50066/7706.jpg_wh860.jpg')
const videoErrorCallback = function (e: any) {
  uni.showModal({
    content: e.target.errMsg,
    showCancel: false,
  })
}
const chapters = ref([
  {
    title: '第一章',
    content: '内容',
  },
  {
    title: '第二章',
    content: '内容',
  },
  {
    title: '第三章',
    content: '内容',
  },
  {
    title: '第四章',
    content: '内容',
  },
  {
    title: '第五章',
    content: '内容',
  },
  {
    title: '第五章',
    content: '内容',
  },
  {
    title: '第五章',
    content: '内容',
  },
  {
    title: '第五章',
    content: '内容',
  },
])

const currentChapter = ref(0) // 当前选中的章节，默认为第一个

function selectChapter(index: number) {
  currentChapter.value = index
  // 可以在此处添加更多逻辑，如跳转到对应章节的详情页面
}

const propsOptions: NVideoMoreListProps = reactive({
  loadStatus: 'more',
  currentPage: 1,
  pageSize: 10,
  list: [
    {
      id: '1',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '2',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image: 'https://img95.699pic.com/photo/40168/8382.jpg_wh860.jpg',
    },
    {
      id: '3',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image: 'https://pic.ibaotu.com/00/94/62/35x888piC6c4.jpg-0.jpg!fw700',
    },
    {
      id: '4',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
    {
      id: '5',
      title: '新课程标题',
      describe: '这是新的描述内容',
      time: '2024-07-15',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
  ],
})

// 热门推荐
const getRecommendedCourse = (options: NVideoMoreListProps) => {
  console.log('下一页')
  propsOptions.currentPage!++
  setTimeout(() => {
    propsOptions.list = [
      ...propsOptions.list!,
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
    ]
    propsOptions.loadStatus = 'more'
  }, 1000)
}

// 自定义滚动到底部被触发
const onScrolltolower = () => {
  console.log('加载更多')
  propsOptions.loadStatus = 'loading'
  getRecommendedCourse(propsOptions)
}

const popupRef = ref()
const open = () => {
  popupRef.value.open()
}
</script>

<style scoped lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.scroll-view {
  // #ifdef VUE3 || H5
  height: calc(100% - 220rpx);
  // #endif

  // #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ || MP-BAIDU || APP-PLUS || APP-PLUS-NVUE
  height: calc(100% - 66rpx);
  // #endif

  padding-top: 350rpx;
}

.popup-content {
  width: 100%;
  height: calc(100vh - 450rpx);
  .popup-content-title {
    width: 100%;
    font-size: 26rpx;
    color: #333;
    padding: 60rpx 10px 20rpx 30rpx;
  }
  .popup-content-text {
    width: 100%;
    padding: 0 30rpx;
    font-size: 26rpx;
    color: #999;
    line-height: 1.5;
  }
}

.video-container {
  width: 100%;
  height: 350rpx;
  position: fixed;
  z-index: 1;

  .video {
    width: 100%;
    height: 100%;
  }
}

.video-introduction {
  width: 100%;
  padding: 60rpx 40rpx 0 40rpx;

  .video-introduction-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .video-introduction-header-title {
      width: 80%;
      font-size: 30rpx;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .video-introduction-header-extra {
      font-size: 24rpx;
      color: #999;
    }

    .p-xy-20rpx {
      padding: 20rpx;
    }
  }

  .video-introduction-chapter {
    display: flex;
    align-items: center;
    width: 100%;
    overflow-x: auto;

    .video-introduction-header-extra {
      white-space: nowrap;
      width: 300rpx;
      font-size: 24rpx;
      color: #999;
    }

    .p-xy-20rpx {
      padding: 20rpx;
    }

    .active {
      color: orangered;
    }
  }
}

.latest-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60rpx 10px 20rpx 30rpx;

  .first {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }

  .latest-btn {
    width: 150rpx;
    height: auto;
    font-size: 24rpx;
    color: #999;
    padding: 0;
    margin: 0;
    background-color: #fff;
  }

  .latest-btn:after {
    border: none;
    padding: 0;
  }

  .latest-text-hover {
    color: #f1dade;
  }
}
</style>
